/* eslint-disable react-hooks/rules-of-hooks */
import React, { useState, useEffect, useRef } from 'react';
import { StatisticCard, ProCard, ProDescriptions } from '@ant-design/pro-components';
import { PageContainer } from '@ant-design/pro-layout';
import { Card, Row, Col, Tooltip } from 'antd';
import styles from './index';
import { Gauge, G2, Liquid } from '@ant-design/plots';
import { getServerInfor } from '@/services/api/monitor/server';
import { Spin, Text, Space } from 'antd';
export default function index() {
  const [serverInfo, setServerInfo] = useState({});
  const [pageLoading, setPageLoading] = useState(true);
  // 获取服务信息
  const asyncGetServerInfor = () => {
    getServerInfor().then((res) => {
      console.log(res.data);
      setServerInfo(res.data);
      setPageLoading(false);
    });
  };

  useEffect(() => {
    asyncGetServerInfor();
  }, []);

  return (
    // <PageContainer title="服务监控" content="服务监控详情">
    <div>
      <Spin tip="Loading..." spinning={pageLoading}>
        <Row gutter={[16, 16]}>
          <Col span={18}>
            <Row gutter={[16, 16]}>
              <Col span={8}>
                <ProCard title="CPU使用率" headerBordered>
                  <CpuComponent cpu={serverInfo.cpu} />
                </ProCard>
              </Col>
              <Col span={8}>
                <ProCard title="内存使用率" headerBordered>
                  <MemonyComponent memory={serverInfo.memory} />
                </ProCard>
              </Col>
              <Col span={8}>
                <ProCard title="JVM监控" headerBordered>
                  <JvmComponent jvm={serverInfo.jvm} />
                </ProCard>
              </Col>
              <Col span={16}>
                <ProCard style={{ height: '245px' }} title="服务概况" headerBordered>
                  <ProDescriptions
                    bordered
                    dataSource={serverInfo.server}
                    columns={[
                      {
                        title: '服务器名称',
                        key: 'serverName',
                        dataIndex: 'serverName',
                        span: 1.5,
                      },
                      {
                        title: '操作系统',
                        key: 'osName',
                        dataIndex: 'osName',
                        span: 1.5,
                      },
                      {
                        title: '服务地址',
                        key: 'serverIp',
                        dataIndex: 'serverIp',
                        span: 1.5,
                      },
                      {
                        title: '服务器架构',
                        key: 'osArch',
                        dataIndex: 'osArch',
                        span: 1.5,
                      },
                    ]}
                  />
                </ProCard>
              </Col>
              <Col span={8}>
                <ProCard title="内存监控" headerBordered>
                  <DemoLiquid />
                </ProCard>
              </Col>
            </Row>
          </Col>
          <Col span={6}>
            <ProCard title="存储信息" headerBordered>
              <StoreComponent />
            </ProCard>
          </Col>
          <Col span={24}>
            <ProCard title="JVM信息" headerBordered>
              <ProDescriptions
                bordered
                dataSource={serverInfo.jvm}
                columns={[
                  {
                    title: 'JVM名称',
                    key: 'name',
                    dataIndex: 'name',
                    span: 1.5,
                  },
                  {
                    title: 'JVM版本',
                    key: 'vmVersion',
                    dataIndex: 'vmVersion',
                    span: 1.5,
                  },
                  {
                    title: 'JVM启动时间',
                    key: 'startTime',
                    dataIndex: 'startTime',
                    span: 1.5,
                  },
                  {
                    title: 'JVM运行时长',
                    key: 'runTime',
                    dataIndex: 'runTime',
                    span: 1.5,
                  },
                  {
                    title: 'Java版本',
                    key: 'version',
                    dataIndex: 'version',
                    span: 1.5,
                  },
                  {
                    title: 'Java安装路径',
                    key: 'home',
                    dataIndex: 'home',
                    span: 1.5,
                  },
                  {
                    title: '运行参数',
                    key: 'runTimeArgs',
                    dataIndex: 'runTimeArgs',
                    span: 3,
                  },
                ]}
              />
            </ProCard>
          </Col>
          <Col span={24}>
            <ProCard title="CPU监控" headerBordered>
              <ProDescriptions
                bordered
                dataSource={serverInfo.cpu}
                columns={[
                  {
                    title: 'CPU名称',
                    key: 'cpuName',
                    dataIndex: 'cpuName',
                    span: 1.5,
                  },
                  {
                    title: 'CPU数量',
                    key: 'cpuNum',
                    dataIndex: 'cpuNum',
                    span: 1.5,
                    render: (dom, record) => <Space>{record.cpuNum}颗物理CPU</Space>,
                  },
                  {
                    title: 'CPU物理核心数',
                    key: 'physicalNum',
                    dataIndex: 'physicalNum',
                    span: 1.5,
                    render: (dom, record) => <Space>{record.physicalNum}个物理核心</Space>,
                  },
                  {
                    title: 'CPU逻辑核心数',
                    key: 'logical',
                    dataIndex: 'logical',
                    span: 1.5,
                    render: (dom, record) => <Space>{record.logical}个逻辑核心</Space>,
                  },
                ]}
              />
            </ProCard>
          </Col>
        </Row>
      </Spin>
    </div>
  );
}

const CpuComponent = (props) => {
  // console.log();
  const config = {
    percent: props.cpu ? props.cpu.sys : 0,
    with: 140,
    height: 140,
    range: {
      ticks: [0, 1 / 3, 2 / 3, 1],
      color: ['#F4664A', '#FAAD14', '#30BF78'],
      width: 12,
    },
    // 提示
    tooltip: {
      showCrosshairs: false,
      showMarkers: false,
      showTitle: true,
      follow: true,
      enterable: true,
      position: 'top',
      title: 'CPU概览',
      domStyles: {
        'g2-tooltip': {
          width: '150px',
          padding: 0,
        },
      },
      customContent: (title, items) => {
        const data = props.cpu
          ? props.cpu
          : {
              cpuNum: 0,
              total: 0,
              sys: 0,
              used: 0,
              wait: 0,
              free: 0,
            };
        const titleDom = `<p style="font-weight: bold; margin-bottom: 8px;">${title}<p>`;
        const cpuNumberDom = `<div style="list-style: none; line-height: 20px; font-size: 13px;">CPU核心数: ${data.cpuNum}</div>`;
        const cpuTotalDom = `<div style="list-style: none; line-height: 20px; font-size: 13px;">CPU总的使用率: ${data.total}</div>`;
        const cpuSysDom = `<div style="list-style: none; line-height: 20px; font-size: 13px;">CPU系统使用率: ${
          data.sys * 100
        } %</div>`;
        const cpuUsedDom = `<div style="list-style: none; line-height: 20px; font-size: 13px;">CPU用户使用率: ${
          data.used * 100
        } %</div>`;
        const cpuWaitDom = `<div style="list-style: none; line-height: 20px; font-size: 13px;">CPU当前等待率: ${
          data.wait * 100
        } %</div>`;
        const cpuFreeDom = `<div style="list-style: none; line-height: 20px; font-size: 13px;">CPU当前空闲率: ${
          data.free * 100
        } %</div>`;
        return ` <div style="padding: 10px; ">${titleDom}${cpuNumberDom}${cpuTotalDom}${cpuSysDom}${cpuUsedDom}${cpuWaitDom}${cpuFreeDom}</div>`;
      },
    },
    axis: {
      label: {
        formatter(v) {
          return Number(v) * 100;
        },
      },
    },
    indicator: {
      pointer: {
        style: {
          stroke: '#D0D0D0',
        },
      },
      pin: {
        style: {
          stroke: '#D0D0D0',
        },
      },
    },
    statistic: {
      content: {
        style: {
          fontSize: '14px',
          lineHeight: '12px',
        },
      },
    },
  };
  return <Gauge {...config} />;
};

const MemonyComponent = (props) => {
  const config = {
    percent: props.memory ? props.memory.usage : 0,
    with: 140,
    height: 140,
    range: {
      ticks: [0, 1 / 3, 2 / 3, 1],
      color: ['#F4664A', '#FAAD14', '#30BF78'],
      width: 12,
    },
    indicator: {
      pointer: {
        style: {
          stroke: '#D0D0D0',
        },
      },
      pin: {
        style: {
          stroke: '#D0D0D0',
        },
      },
    },
    statistic: {
      content: {
        style: {
          fontSize: '14px',
          lineHeight: '12px',
        },
      },
    },
  };

  return <Gauge {...config} />;
};

const StoreComponent = () => {
  const onReadyColumn = (plot) => {
    plot.on('plot:mousemove', (...args) => {
      console.log('asaaaaaaaaaaaaaaaaaaaaaaaa');
    });
  };
  const config = {
    percent: 0.25,
    shape: 'rect',
    outline: {
      border: 4,
      distance: 8,
    },
    wave: {
      length: 128,
    },
    tooltip: {
      triggerOn: 'mousemove' | 'click' | 'none',
      inPlot: true, // 将 tooltip 展示在指定区域内
      follow: true, // tooltip 是否跟随鼠标移动
      containerTpl: '1231',
      shared: true || false, // 默认为 true, false 表示只展示单条 tooltip
      position: 'left' || 'right' || 'top' || 'bottom', // 固定位置展示 tooltip
    },

    pattern: {
      type: 'dot',
      cfg: {
        size: 30,
      },
    },
  };

  return <Liquid {...config} />;
};

const JvmComponent = (props) => {
  const config = {
    percent: props.jvm ? props.jvm.usage : 0,
    range: {
      ticks: [0, 1 / 3, 2 / 3, 1],
      color: ['#F4664A', '#FAAD14', '#30BF78'],
      width: 12,
    },
    axis: {
      label: {
        formatter(v) {
          return Number(v) * 100;
        },
      },
    },
    with: 140,
    height: 140,
    indicator: {
      pointer: {
        style: {
          stroke: '#D0D0D0',
        },
      },
      pin: {
        style: {
          stroke: '#D0D0D0',
        },
      },
    },
    statistic: {
      content: {
        style: {
          fontSize: '14px',
          lineHeight: '12px',
        },
      },
    },
  };
  return <Gauge {...config} />;
};

const DemoLiquid = () => {
  const config = {
    percent: 0.25,
    // shape: 'rect',
    with: 140,
    height: 155,
    outline: {
      border: 2,
      distance: 4,
    },
    wave: {
      length: 128,
    },
    statistic: {
      content: {
        style: {
          fontSize: '14px',
          lineHeight: '12px',
        },
      },
    },
  };
  return <Liquid {...config} />;
};
